<template>
  <div>
    <p :class="color">This should be red</p>
    <div class="box">
      <button @click="handClick">改变样式</button>
    </div>
    <hr />
    <div :class="style[colorClass]">module.scss</div>
    <button @click="handleChange">切换颜色</button>
  </div>
</template>

<!-- <script>
export default {
  name: 'moduleStyle',
  data() {
    return {
      color: this.classNames.red
    }
  },
  methods: {
    handClick() {
      this.color = this.color == this.classNames.red ? this.classNames.green : this.classNames.red
    }
  }
}
</script> -->
<script setup>
import { useCssModule, ref } from 'vue'
import style from './test.module.scss'
defineOptions({
  name: 'moduleStyle'
})
const colorClass = ref('style1')
const classNames = useCssModule('classNames')
const color = ref(classNames.red)
const handClick = function () {
  color.value = color.value === classNames.red ? classNames.green : classNames.red
}
const handleChange = () => {
  colorClass.value = colorClass.value === 'style1' ? 'style2' : 'style1'
}
</script>
<style module="classNames">
.red {
  color: red;
}
.green {
  color: green;
}
</style>
<style lang="scss" scoped>
.box {
  font-size: 20px;
}
</style>
